<template>
	<!-- pages/commodityManagement/commodityManagement.wxml -->
	<view class="commodity_management">
		<view class="search">
			<view class="search_container">
				<image class="search_icon" src="/static/pages/image/search_icon.png" mode="widthFix"></image>
				<input class="search_input" placeholder="请输入搜索内容" placeholder-style="color: #ACACAC;">
			</view>
		</view>
		<view class="order_nav">
			<view v-for="(item, index) in nav_list" :key="index" class="nav_item" :data-id="item.id"
				@tap="onChangeActive">
				<text class="item_txt">{{item.lab}}</text>
				<view class="item_line" :style="'background:' + (item.id == isActive ? '#1EB9A6' : '#ffffff')"></view>
			</view>
		</view>
		<view class="commodity_list">
			<view v-for="(item, index) in commodity_list" :key="index" class="commodity_item">
				<view class="item_info">
					<image class="info_img" :src="getImage(item.image)"></image>
					<view class="info_content">
						<text class="info_title">{{item.title}}</text>
						<!-- <text class="info_inventory">库存{{item.stock}}件</text> -->
						<view class="info_money">
							<view class="content_money">
								<text class="money_symbol">¥</text>
								<text class="money_txt">{{filter.getPriceIntegr(item.sell_price)}}</text>
								<text class="money_decimal">.{{filter.getPriceDecimals(item.sell_price)}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="item_btn">
					<button class="btn del_btn" :data-id="item.id" @tap="onDel">删除</button>
					<button class="btn offShelf_btn" v-if="isActive == 1" :data-id="item.id" data-type="2"
						@tap="onChangeStatus">下架</button>
					<button class="btn offShelf_btn" v-if="isActive == 3" :data-id="item.id" data-type="1"
						@tap="onChangeStatus">上架</button>
					<button class="btn edit_btn" :data-id="item.id" @tap="onEdit">编辑</button>
				</view>
			</view>
		</view>

		<load-more :load="load" @onMore="onMore"></load-more>

		<button class="publish_goods" @tap="toPublishGoods">
			<image class="btn_img" src="/static/pages/image/publish_goods.png"></image>
		</button>
	</view>
</template>

<script module="filter" lang="wxs" src="../../we7/resource/js/tools.wxs"></script>

<script>
	// pages/commodityManagement/commodityManagement.js
	var app = getApp();
	import loadMore from "../../components/load-more/load-more";

	export default {
		data() {
			return {
				isActive: 1,
				nav_list: [{
					id: 1,
					lab: '在售中'
				}, {
					id: 0,
					lab: '已售罄'
				}, {
					id: 2,
					lab: '已下架'
				}],
				commodity_list: [],
				image: [],
				//封面
				load: 'noMore',
				pageNum: 0,
				loading: false
			};
		},

		components: {
			loadMore
		},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {},

		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			this.setData({
				load: 'more',
				pageNum: 1,
				commodity_list: []
			});
			this.getOrderlist();
		},

		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},

		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},

		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},

		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
			getImage(images){
				return JSON.parse(images)[0]
			},
			onMore() {
				if (this.load != 'more') return;
				this.getOrderlist();
			},

			// 改变选中
			onChangeActive(event) {
				const id = event.currentTarget.dataset['id'];
				this.setData({
					isActive: id,
					pageNum: 1,
					commodity_list: []
				});
				this.getOrderlist();
			},

			onChangeStatus(event) {
				const id = event.currentTarget.dataset['id'];
				const type = event.currentTarget.dataset['type'];
				wx.showLoading({
					title: '加载中'
				});
				app.globalData.util.request({
					url: "entry/wxapp/Api",
					data: {
						m: "monai_market",
						r: "goods.index.is_frame",
						uid: wx.getStorageSync('uid'),
						is_frame: type,
						id: id
					},
					success: res => {
						this.setData({
							pageNum: 1,
							commodity_list: []
						});
						this.getOrderlist();
						wx.hideLoading();
					},
					fail: res => {
						wx.hideLoading();
					}
				});
			},

			toPublishGoods() {
				wx.navigateTo({
					url: '/pagesA/publishGoods/publishGoods'
				});
			},

			onDel(event) {
				const id = event.currentTarget.dataset['id'];
				wx.showLoading({
					title: '加载中'
				});
				app.globalData.util.request({
					url: "entry/wxapp/Api",
					data: {
						m: "monai_market",
						r: "goods.index.de",
						uid: wx.getStorageSync('uid'),
						id: id
					},
					success: res => {
						this.setData({
							loading: false,
							pageNum: 1,
							commodity_list: []
						});
						this.getOrderlist();
						wx.hideLoading();
					},
					fail: res => {
						wx.hideLoading();
					}
				});
			},

			onEdit(event) {
				const id = event.currentTarget.dataset['id'];
				wx.navigateTo({
					url: '/pagesA/publishGoods/publishGoods?id=' + id
				});
			},

			getOrderlist() {
				this.setData({
					load: 'loading'
				});
				wx.showLoading({
					title: '加载中'
				});
				app.globalData.util.request({
					url: "entry/wxapp/Api",
					data: {
						m: "monai_market",
						r: "goods.index.mygoods",
						uid: wx.getStorageSync('uid'),
						is_frame: this.isActive,
						leftid: this.pageNum
					},
					success: res => {
						let {
							commodity_list
						} = this;
						let load = 'more';
						if (res.data.data.length < 6) load = 'noMore';
						this.setData({
							load,
							pageNum: this.pageNum + 1,
							commodity_list: commodity_list.concat(res.data.data)
						});
						wx.hideLoading();
					},
					fail: res => {
						wx.hideLoading();
					}
				});
			}

		}
	};
</script>
<style>
	@import "./commodityManagement.css";
</style>
